import config from "./config.js";
// 画布
export default class Canvas {
  constructor(app) {
    this.$app = app;
    this.$el = this.element();
    this.box();
  }

  // 创建画布
  element() {
    const el = document.createElement("div");
    el.classList.add("app");
    const num = config.canvas.width / config.width;
    el.style.gridTemplateColumns = `repeat(${num},${config.width}px)`;
    el.style.gridAutoRows = `${config.height}px`;
    document.body.insertAdjacentElement("beforeEnd", el);

    return el;
  }

  // 绘制格子
  box() {
    let num =
      (config.canvas.width * config.canvas.height) /
      (config.width * config.height);
    Array(num)
      .fill("")
      .forEach((a, i) => {
        const div = document.createElement("div");
        div.classList.add("box");
        //  div.textContent = i + 1;
        this.$el.insertAdjacentElement("beforeend", div);
      });
  }
}
